<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值应用场景</title>
</head>

<body>
    <p>以下是 10 个 JavaScript 解构赋值的实际应用场景案例，每个案例都展示了解构赋值在不同情况下的使用。</p>

    <p>
        1、交换变量的值 <br>
        使用解构赋值可以方便地交换两个变量的值，而无需借助临时变量。
    </p>
    <p>
        2、从对象中提取属性 <br>
        解构赋值可以从对象中提取属性值并赋值给变量。
    </p>
    <p>
        3、函数参数的解构赋值 <br>
        函数参数可以使用解构赋值来直接提取对象属性，避免手动提取。
    </p>
    <p>
        4、处理嵌套对象 <br>
        解构赋值可以处理嵌套对象，从而提取内部属性。
    </p>
    <p>
        5、数组解构赋值 <br>
        可以使用解构赋值从数组中提取元素值。
    </p>
    <p>
        6、默认值 <br>
        解构赋值时可以为变量设置默认值，以防止属性缺失。

    </p>
    <p>
        7、提取剩余元素 <br>
        使用解构赋值时可以提取数组或对象中剩余的元素。
    </p>
    <p>
        8、嵌套解构赋值 <br>
        解构赋值支持在对象和数组中同时使用，处理复杂的数据结构。
    </p>
    <p>
        9、解构赋值与函数返回值 <br>
        解构赋值可以方便地处理函数的返回值，尤其是当函数返回多个值时。
    </p>
    <p>
        10、在循环中使用解构赋值 <br>
        解构赋值可以在循环中用于处理数组或对象。
    </p>
    <script>

        let a = 1;
        let b = 2;
        [a, b] = [b, a];
        console.log(a); // 2
        console.log(b); // 1


        const user = {
            name: "Alice",
            age: 25,
            city: "New York"
        };
        const { name, age } = user;
        console.log(name); // Alice
        console.log(age);  // 25


        function greet({ name, age }) {
            console.log(`Hello, my name is ${name} and I am ${age} years old.`);
        }
        const user2 = {
            name: "Bob",
            age: 30
        };
        greet(user2);


        const person = {
            name: "Charlie",
            address: {
                city: "San Francisco",
                country: "USA"
            }
        };
        const { address: { city, country } } = person;
        console.log(city);    // San Francisco
        console.log(country); // USA


        const fruits = ["apple", "banana", "cherry"];
        const [first, second] = fruits;
        console.log(first);  // apple
        console.log(second); // banana


        const user3 = {
            name: "Dave"
        };
        const { name3, age3 = 20 } = user;
        console.log(name3); // Dave
        console.log(age3);  // 20 (默认值)


        const colors = ["red", "green", "blue", "yellow"];
        const [primary, secondary, ...others] = colors;
        console.log(primary);   // red
        console.log(secondary); // green
        console.log(others);    // [ 'blue', 'yellow' ]


        const user4 = {
            name4: "Eve",
            hobbies: ["reading", "traveling"]
        };
        const {
            name4,
            hobbies: [firstHobby, secondHobby]
        } = user4;
        console.log(name4);       // Eve
        console.log(firstHobby); // reading
        console.log(secondHobby); // traveling


        function getCoordinates() {
            return [40.7128, -74.0060];
        }
        const [latitude, longitude] = getCoordinates();
        console.log(latitude);  // 40.7128
        console.log(longitude); // -74.0060

        const people = [
            { name: "Frank", age: 35 },
            { name: "Grace", age: 28 },
            { name: "Hank", age: 42 }
        ];
        for (const { name, age } of people) {
            console.log(`${name} is ${age} years old.`); // Frank is 35 years old.
            // Grace is 28 years old.
            // Hank is 42 years old.
        }


    </script>

</body>

</html>